function tabpane(precent) {
    var titles = document.getElementById("tab-title").children;
    var contents = document.getElementById("tab-content").children;
    var num = titles.length;
    var width = precent / num;
    var title;
    var content;
    var activeTitle = titles[0];
    var activeContent = contents[0];
    for (var i = 0; i < titles.length; i++) {
        title = titles[i];
        title.id = "tabTitle" + i;
        title.style.width =  width + "%";
        content = contents[i];
        content.id = "tabContent" + i;
        title.onclick = function () {
            if (activeTitle != null) {
                activeTitle.className = "";
            }
            if (activeContent != null) {
                activeContent.style.display = "none";
            }
            var index = this.id.substring(8);
            titles[index].className = "select";
            activeTitle = titles[index];
            contents[index].style.display = "block";
            activeContent = contents[index];
        }
    }
}
